<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .tab {
      width: 600px;
      margin: 100px auto;
      border: 2px solid cadetblue;
    }

    .tab .tt {
      display: flex;
      align-items: center;
      height: 40px;
      line-height: 40px;
      border-bottom: 2px solid cadetblue;
    }

    .tab .tt a {
      padding: 0 20px;
      color: cadetblue;
    }

    .tab .tt a.active {
      background-color: cadetblue;
      color: #fff;
    }

    .tab .card {
      height: 300px;
      display: none;
    }
  </style>
</head>
<body>

<div id="app">
  <div class="tab">
    <div class="tt">
      <!--<a
        v-for="(item, index) of tabT"
        href="javascript:void(0)"
        :class="{ active: index === activeIndex }"
        @click="handleClick(index)"
      >{{ item }}</a>-->
      <a
        v-for="(item, index) of tabT"
        href="javascript:void(0)"
        :class="`${ index === activeIndex ? 'active' : '' }`"
        @click="handleClick(index)"
      >{{ item }}</a>
    </div>
    <div>
      <div
        class="card"
        :style="{ display: index === activeIndex ? 'block' : 'none' }"
        v-for="(item, index) of tabT"
      >
        <h1 v-for="_ of 3">{{item}}</h1>
      </div>
      <!--<div class="card" style="display: block">
        <h1>实时热点</h1>
        <h1>实时热点</h1>
        <h1>实时热点</h1>
      </div>
      <div class="card">
        <h2>今日热点</h2>
        <h2>今日热点</h2>
        <h2>今日热点</h2>
        <h2>今日热点</h2>
      </div>
      <div class="card">
        <h4>七日热点</h4>
        <h4>七日热点</h4>
        <h4>七日热点</h4>
        <h4>七日热点</h4>
        <h4>七日热点</h4>
      </div>-->
    </div>
  </div>
</div>
<!-- .vue -->
<script src="vue.js"></script>
<script>
  const app = new Vue({
    data: {
      tabT: ['实时热点', '今日热点', '七日热点'],
      activeIndex: 0
    },
    methods: {
      handleClick(index) {
        // console.log(index)
        this.activeIndex = index
        // console.log(event.target)
      }
    },
    mounted() {
      // console.log(document.querySelectorAll('.tt a'))
      // console.log(document.querySelectorAll('.card'))
    },
    /*
    created() {
      console.log('created')
    }*/
  }).$mount('#app')

</script>


</body>
</html>